<script lang="ts" setup>
// 模块引入
import Account from '../base/AccountStore';
import { useRouter } from 'vue-router';
import { PageName } from '../base/Router';
import { ref } from 'vue';

let router = useRouter()
let account = Account()
// 绑定到搜索栏的属性
let searchText = ref("")
// 登出方法
function logout() {
    account.logout()
    router.replace({
        name: PageName.login
    })
}
// 跳转到购物车的方法
function goShopCar() {
    router.push({
        name: 'shopCar'
    })
}
// 跳转订单列表页面
function goOrder() {
    router.push({
        name: 'order'
    })
}

function toSearch() {
    if (searchText.value.length > 0) {
        console.log(searchText.value)
        router.push({
            name: 'search',
            params: {
                keyword: searchText.value
            }
        })
    }
}

</script>

<template>
    <!-- 固钉组件，会常驻在页面顶部 -->
    <el-affix :offset="0">
        <div class="top-bar">
            <!-- 用户头像部分 -->
            <el-avatar style="font-size: 30px;background-color: red; margin-top:10px; margin-left: 60px;" @click="goOrder"> {{ account.$state.info?.username.charAt(0) }} </el-avatar>
            <!-- 欢迎语 -->
            <span style="font-size: 25px; color: red; margin-top:10px; margin-left: 20px;">欢迎您的光临~</span>
            <!-- 搜索栏部分 -->
            <span>
                <el-input
                    v-model="searchText"
                    placeholder="搜索感兴趣的商品"
                    style="width: 700px; margin-left: 40px; height: 40px;"
                    input-style="color:red">
                    <template #append>
                        <el-icon style="color: red;"><el-button icon="Search" @click="toSearch"/></el-icon>
                    </template>
                </el-input>
            </span>
            <!-- 登出按钮 -->
            <el-button type="primary" @click="logout" style="background-color: red; border-color: red; margin-left: 60px;">注销</el-button>
        </div>
    </el-affix>
    <!-- 主流功能区 -->
    <div class="container">
        <router-view :key="router.currentRoute.value.fullPath"></router-view>
    </div>
    <div style="position: fixed; right: 60px; bottom: 60px; width: 50px; height: 50px; background-color: red; border-radius: 25px;" @click="goShopCar">
        <el-icon :size="30" style="color: white; width: 100%; height: 100%;"><ShoppingCart /></el-icon>
    </div>
</template>

<style scoped>
.top-bar {
    width: 100%;
    background-color: white;
    border-bottom: 2px red solid;
    height: 60px;
}

.container {
    margin: 0px 60px;
}

</style>